import type { ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@/components';
import { userList } from '@/services/system/user';
import { Avatar, Button, Tag } from 'antd';

export default () => {
    const columns: ProColumns<API.User>[] = [
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            hideInSearch: true,
            render: (_, user) => <Avatar shape={'circle'} src={user.avatar} />,
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
        },
        {
            title: '角色',
            dataIndex: 'role',
            hideInSearch: true,
            render: (_, record) => {
                if (record.role) {
                    return record.role.map((it: string) => <Tag key={it}>{it}</Tag>);
                }
                return '';
            },
        },
        {
            title: '部门',
            dataIndex: 'department',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            hideInSearch: true,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_,record) => {
                return [<a>查看</a>,<a>编辑</a>,<a>删除</a>,<a>更多</a>,]
            }
        },
    ];
    return (
        <PageContainer>
            <ProTable headerTitle={<Button type="primary">新建</Button>} actionsRender={<Button type="primary">新建</Button>} columns={columns} request={userList} />
        </PageContainer>
    );
};
